<template>
	<div class="chatgpt-recommend-box">
		<div class="opening-words">
			你好，
		</div>
		<div class="opening-words">
			我是你的代理人智能助手～
		</div>
		<div class="chatgpt-recommend-body">
			<div class="recommend-question-type">
				<span class="recommend-question-tips">猜你想问：</span>
				<h-button
					v-for="(item, index) in recommendList" :key="index" @click="clickQuestionType(index, item)"
					type="ghost"
					class="type-item"
					:class="{active: currentTypeIndex === index}"
					>{{item.name}}</h-button>
			</div>
			<div
				v-for="(item, index) of questionList" :key="index"
				class="chatgpt-recommend-question">
				<span class="question-label">{{item.name}}</span>
				<span
					v-for="(innerItem, innerIndex) of item.children" :key="innerIndex"
					class="recommend-question-item"
					@click="getAdviceInstruction(innerItem)">
					{{innerItem.name}}
				</span>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex"
export default {
	name: 'ChatgptRecommendBox',
	props: {
		isPreview: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			currentTypeIndex: 0,
			recommendList: [
				{
					name: '知识问答',
					children: [
						{
							name: '公司问题',
							children: [
								{
									name: '保勤保险公司怎么样？',
								},
								{
									name: '保险公司的优势？',
								}
							]
						},
						{
							name: '业务流程',
							children: [
								{
									name: '怎么进行投保？',
								},
								{
									name: '如何查询保单？',
								}
							]
						},
						{
							name: '基础知识',
							children: [
								{
									name: '保险是什么？',
								},
								{
									name: '保险有什么种类？',
								}
							]
						}
					]
				},
				{
					name: '产品详情',
					children: [
						{
							name: '公司问题2',
							children: [
								{
									name: '保勤保险公司怎么样？',
								},
								{
									name: '保险公司的优势？',
								}
							]
						},
						{
							name: '业务流程2',
							children: [
								{
									name: '怎么进行投保？',
								},
								{
									name: '如何查询保单？',
								}
							]
						},
						{
							name: '基础知识2',
							children: [
								{
									name: '保险是什么？',
								},
								{
									name: '保险有什么种类？',
								}
							]
						}
					]
				},
				{
					name: '保险观念',
					children: [
						{
							name: '公司问题3',
							children: [
								{
									name: '保勤保险公司怎么样？',
								},
								{
									name: '保险公司的优势？',
								}
							]
						},
						{
							name: '业务流程3',
							children: [
								{
									name: '怎么进行投保？',
								},
								{
									name: '如何查询保单？',
								}
							]
						},
						{
							name: '基础知识3',
							children: [
								{
									name: '保险是什么？',
								},
								{
									name: '保险有什么种类？',
								}
							]
						},
					]
				}
			]
		}
	},
	computed: {
		...mapState('lm-chat', ['currentSessionInfo', 'currentClientInfo']),
		questionList() {
			return this.recommendList[this.currentTypeIndex].children
		}
	},
	methods: {
		...mapMutations('lm-chat', ['pushGptMessageList']),
		...mapActions('lm-chat', ['postGptMsg']),
		// 点击问题分类
		clickQuestionType(index, item) {
			this.currentTypeIndex = index
		},
		// 根据指令获取识别内容
		getAdviceInstruction(item) {
			if(this.isPreview) return
			let params = {}
			if(item && item.instruction_id) {
				params.instruction_id = item.instruction_id
				params.instruction_name = item.name
			} else {
				params.quote_msg_content = item.name
			}
			this.postGptMsg(params)
		},
	}
}
</script>

<style lang="scss" scoped>
.chatgpt-recommend-box{
	margin-bottom: 16px;
	border-radius: 8px;
	padding-bottom: 20px;
	background-image: url(../../../assets/images/chatgpt-recommend-bg.png);
	background-size: 212px 122px;
	background-repeat: no-repeat;
	background-position: right top;
	.opening-words{
		font-size: 20px;
		color: #122057;
		font-weight: bold;
		line-height: 1;
		margin-bottom: 12px;
		line-height: 26px;
		letter-spacing: 2px;
	}
	.chatgpt-recommend-body{
		margin-top: 20px;
		.recommend-question-type{
			display: flex;
			color: #434343;
			align-items: center;
			margin-bottom: 12px;
			.recommend-question-tips{
				color: #434343;
			}
			.type-item{
				border-radius: 4px;
				background: #EBF4FF;
				border-color:#EBF4FF;
				margin-left: 10px;
				color: #434343;
				&.active{
					background:#EBF2FF;
					border-color:#4686F2;
				}
			}
		}
		
		.chatgpt-recommend-question{
			line-height: 28px;
			display: flex;
			flex-wrap: wrap;
			.question-label{
				color: #5283F5;
				&::after{
					content: "|";
					margin-left: 10px;
					position: relative;
					top: -1px;
					right: 0px;
					color: #636363;
				}
			}
			.recommend-question-item{
				margin-left: 10px;
				color: #636363;
				cursor: pointer;
				&:hover{
					color: #4686F2;
				}
			}
		}
	}
}
</style>